<template>
    <div class="selectTabs_box text-normal">
        <div class="sortItem" @click="onClickSort('good','销量最高','good')">
            <div :class="{'color-primary': selectType === 'good'}">销量最高</div>
            <img src="https://oss-frakiss.oss-cn-chengdu.aliyuncs.com/icon/mini_images/up_jiantou.png"  class="sortItem_img" alt="" /><!-- :class="{'invert' : selectType === 'sort'}" -->
        </div>
        <div class="sortItem" @click="onClickSort('popularity','口碑最好','popularity')">
            <div :class="{'color-primary': selectType === 'popularity'}">口碑最好</div>
            <img src="https://oss-frakiss.oss-cn-chengdu.aliyuncs.com/icon/mini_images/up_jiantou.png" class="sortItem_img" alt="" />
        </div>
        <div class="sortItem" @click="onClickSort('distance','距离最近','distance')">
            <div :class="{'color-primary': selectType === 'distance'}">距离最近</div>
            <img src="https://oss-frakiss.oss-cn-chengdu.aliyuncs.com/icon/mini_images/weizhi.png" class="sortItem_img" alt="" />
        </div>
        <!-- <div class="sortItem" @click="onClickSort('score','评分最高','priceDesc')">
            <div :class="{'color-primary': selectType === 'score'}">评分最高</div>
            <img src="https://oss-frakiss.oss-cn-chengdu.aliyuncs.com/icon/mini_images/19@2x.png" class="up_img" alt="" />
        </div> -->

    </div>
</template>

<script>
export default {
    data() {
        return {
            // 用户点选类型
            selectType:'',
            /** 排序 */
            sortName: '',
            sortValue: '',
        };
    },
    methods: {
        /**
         * 点击排序
         */
        onClickSort(type,_name,_val) {
            const item = {
                val: _val,
                name: _name,
            }
            this.$emit('sort', item);
            this.sortName = _name;
            this.sortValue = _val;
            // this.filterType = '';

            // if(this.selectType === type){
            //     this.selectType = '';
            //     return;
            // }
            this.selectType = type
        }
    },
};
</script>

<style lang="less">
@import "../../lib/style/mixins.less";

.selectTabs_box {
    width: 92%;
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin: 0px auto;
    .sortItem{
        // width: 20%;
        display: flex;
        font-size: 12px;
        transition: transform .3s;
    
        .sortItem_img{
            width: 12px;
            height:12px;
            margin: 4px 0px 0px 4px;
        }
        .up_img{
            width: 8px;
            height:12px;
            margin: 4px 0px 0px 4px;
        }
    }
    // .selectText{
    //     color: ;
    // }
    .invert {
        transform-origin: center;
        transform: rotateZ(-180deg);
    }
}
</style>